import React, {Component} from 'react';
import {NativeModules, StyleSheet, View} from "react-native";
import {SafeAreaView} from "react-navigation";
import Swiper from 'react-native-swiper'
import {isAndroid, windowHeight, windowWidth} from "../../configs/platform";
import ScaledPhotoView from "./ScaledPhotoView";

/**
 * 浏览大图
 */
class PhotoBrowserScene extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showAlert: false,
            showMsg: '',
        }
        if (isAndroid()===true) {
            var jsonObj = {
                type: 'change_status_color',
                color: 'black'
            }
            NativeModules.XpjxModule.handleMessage(JSON.stringify(jsonObj));
        }
    }

    componentWillUnmount() {
        if (isAndroid()===true) {
            var jsonObj = {
                type: 'change_status_color',
                color: 'white'
            }
            NativeModules.XpjxModule.handleMessage(JSON.stringify(jsonObj));
        }
    }

    render() {
        let images = this.props.navigation.getParam('images', [])
        const index = this.props.navigation.getParam('index', 0)

        return (
            <SafeAreaView style={styles.container}>
                <Swiper style={styles.wrapper}
                        ref={swiper => {
                            this.swiper = swiper;
                        }}
                        index={index}
                        loop={false}
                        showsPagination={this.props.showsPagination}
                        scrollEnabled={true}
                        paginationStyle={{ bottom: 30  }}
                        dot={<View style={{
                            backgroundColor: 'rgba(255,255,255,.3)',
                            width: 5,
                            height: 5,
                            borderRadius: 2.5,
                            marginHorizontal: 3,
                        }}/>}
                        activeDot={<View style={{
                            backgroundColor: 'rgb(255,255,255)',
                            width: 5,
                            height: 5,
                            borderRadius: 2.5,
                            marginHorizontal: 3,
                        }}/>}
                >
                    {images.map((imgUrl, i) => (
                        <View key={i} style={styles.slide}>
                            <ScaledPhotoView uri={imgUrl} width={windowWidth} showsPagination={(images.length>1)?true:false}/>
                        </View>
                    ))}
                </Swiper>
            </SafeAreaView>
        );
    }
}

export default PhotoBrowserScene;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    wrapper: {
        backgroundColor: 'black'
    },

    slide: {
        flex: 1,
        backgroundColor: 'transparent',
        alignItems: 'center',
        justifyContent: 'center',
    },

    image: {
        width: windowWidth,
        height: windowHeight,
    },

});